<template>
  <baseCard title="应用健康" :height="height" :contentStyle="contentStyle">
    <template #tag>
      <div class="tag">
        <span>优</span>
      </div>
    </template>
    <div class="box">
      <arco-collapse
        :default-active-key="activeKey"
        v-for="item in data"
        :key="item"
      >
        <arco-collapse-item :header="item.name" :key="item.project_name">
          <template #extra>
            <span class="btn-text" @click.stop="handleDetails(item)"
              >查看详情</span
            >
          </template>
          <arco-table
            :columns="columns"
            :data="item.data_info"
            :pagination="false"
            :scrollbar="true"
            :scroll="scroll"
            :rowClass="rowClassName"
            :hoverable="true"
            @row-click="rowClick"
          >
            <template #title="{ record }">
              <div style="margin-left: 0.2rem">
                <span>{{ record.title }}</span>
              </div>
            </template>
            <template #health_status="{ record }">
              <div style="display: flex">
                <span
                  :style="{
                    color:
                      record.health_status === '优'
                        ? '#00B675'
                        : record.health_status === '良'
                        ? '#FFC300'
                        : record.health_status === '中'
                        ? '#F53F3F'
                        : '#57C5FF',
                  }"
                  >{{ record.health_status }}</span
                >
              </div>
            </template></arco-table
          >
        </arco-collapse-item>
      </arco-collapse>
    </div>
  </baseCard>

  <VptModal
    :title="codeData?.xmmc"
    width="4.45rem"
    :showModal="showModal"
    @onChange="onChange"
  >
    <template #content>
      <CodePanel :data="codeData"></CodePanel>
    </template>
  </VptModal>
</template>
<script setup>
import { ref, reactive } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptModal from "@/components/modal/vpt-modal/index.vue";
import CodePanel from "./components/code-panel.vue";
import { codeDateDetails } from "@/api/mockApi/construction.js";

const props = defineProps({
  height: { type: String, default: "" },
  data: {
    type: Array,
    default: {
      display: [],
    },
  },
  activeKey: {
    type: Array,
    default: {
      display: [],
    },
  },
  contentStyle: {
    type: Object,
    default: {
      display: "block",
      paddingTop: "0",
    },
  },
});

const columns = reactive([
  {
    title: "\u00A0\u00A0\u00A0\u00A0\u00A0版本号",
    // slotName: "title",
    dataIndex: "title",
    width: 130,
    ellipsis: true,
    tooltip: true,
    align: "left",
  },
  {
    title: "健康级别",
    dataIndex: "health_status",
    slotName: "health_status",
    width: 80,
  },
  { title: "发版状态", dataIndex: "iter_status", width: 80 },
  { title: "迭代周期", dataIndex: "time_cycle", width: 160 },
  { title: "需求数", dataIndex: "xq_num", width: 80, align: "center" },
  { title: "超期需求数", dataIndex: "over_count", width: 80, align: "center" },
  {
    title: "需求完成数",
    dataIndex: "finish_count",
    width: 80,
    align: "center",
  },
  { title: "缺陷数", dataIndex: "bugs_num", width: 80, align: "center" },
  {
    title: "超期缺陷数",
    dataIndex: "bug_over_num",
    width: 80,
    align: "center",
  },
  { title: "缺陷关闭数", dataIndex: "bug_wc_num", width: 80, align: "center" },
]);

const showModal = ref(false);
const selectedRowKey = ref("");
const codeData = ref({});

const handleDetails = (item) => {
  showModal.value = true;
  getCodeDateDetails({
    xmmc: item.project_name,
  });
};
// 获取代码详情
const getCodeDateDetails = (params = {}) => {
  codeDateDetails(params).then((res) => {
    codeData.value = res.data && res.data[0];
  });
};
const rowClassName = (record, index) => {
  if (selectedRowKey.value == record.iterate_id) {
    return "row-selected";
  }
  return "";
};
const rowClick = (record, index) => {
  selectedRowKey.value = record.iterate_id; // 更新选中的行
  emit("row-click", record);
};
const emit = defineEmits(["changeTab", "row-click"]);
const scroll = {
  y: "100%",
};

const onChange = (visible) => {
  showModal.value = false;
};
</script>

<style scoped lang="less">
@import url("../../../../assets/style/collapse.less");
@import url("../../../../assets/style/table.less");
:deep(.arco-table-th) {
  background: #f2f3f5 !important;
  // border: none !important;
}
.tag {
  width: 0.32rem;
  height: 0.2rem;
  background: #00b42a;
  color: #fff;
  border-radius: 2px;
  font-size: 0.12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  height: 100%;
  overflow-y: auto;
  .btn-text {
    color: #165dff;
  }
}

:deep(.seamless-scroll) {
  flex: 1;
  overflow: hidden;

  .arco-table-container {
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
  }
}

.auto-scroll-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .vpt-table-header {
    :deep(.arco-table-tfoot) {
      box-shadow: none;
    }

    :deep(.arco-table-body) {
      display: none;
    }
  }

  .vpt-table-wrapper {
    :deep(.arco-table-header) {
      display: none;
    }
  }
}
:deep(.arco-table-tr:hover) {
  background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
  background-size: 100% 100% !important;
}

// :deep(
//     .arco-table-hover:not(.arco-table-dragging)
//       .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
//   ) {
//   background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
//   background-size: 100% 98% !important;
// }
:deep(.arco-table-body) {
  background: #fff !important;
}
:deep(.arco-table-td) {
  background: none !important;
}
:deep(.arco-table-container) {
  border: none !important;
}
:deep(.arco-table-header) {
  border-radius: 0 !important;
}
.header {
  position: relative;
  top: -10px;
  color: #fff;
  z-index: 99999999;
  height: 24px;
}
// :deep(.arco-table-cell.arco-table-cell-align-left) {
//   justify-content: center !important;
// }
// :deep(.arco-table-cell.arco-table-cell-align-right) {
//   justify-content: center !important;
// }
</style>
